@font-face {
    font-family: 'OPlusSans3-R';
    src: url(../../../static/font/OPlusSans3-Regular.woff2);
    font-display: swap;
    font-style: normal;
}

body {
    font-family: 'OPlusSans3-R', sans-serif;
    /* 设置等宽字体 */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    --moz-font-feature-settings: "tnum";
    --webkit-font-feature-settings: "tnum";
}

/* ------------------------ 通用设置 start------------------------ */
* {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    list-style: none;
    /* 解决文字变大 */
    max-height: 9999px;
    box-sizing: border-box;
    user-select: none;

}

strong,
b {
    color: var(--bold-color);
}

/* ------------------------ 通用设置  end ------------------------ */
/* ------------------------ 主体颜色 start------------------------ */
:root {
    /* ----- 绿色主题 ----- */

    --color: #42bc7a;
    --color-1: #def0e4;
    --color-2: #addbbc;

    --light: #ffffff;
    --light1: #f1f2f3;
    --light2: #f3f6f9;

    --theme: var(--color);
    --resume-bg: var(--light);
    --text-bg: var(--light2);

    /* 标题 */
    --title-bg: #dbf0e5;
    /* --title-bg: #d4f2de; */
    --title-border: var(--theme);
    --title: #123;
    /* 文字 */
    /* --bold-color: #2c3e50;
    --text: #2c3e50; */
    --name-color: #181818;
    --title-color: #123;
    --bold-color: #456;
    --text-color: #789;
    --color-footer: #369;
    /* 徽章 */
    --huizhang1: #ff9999;
    --huizhang2: #ffcc99;
    --huizhang3: #99ccff;
    --huizhang4: #99cc66;
    --huizhang5: #66cccc;
    --huizhang6: #ccccff;

    /* ----- 进度条背景 ----- */
    --bar-bg: var(--light1);
    /* ----- 进度条内容 ----- */
    --bar-bg1: var(--color-1);
    --bar-bg2: var(--color-2);
    --bar-bg3: var(--theme);
    /* ----- 进度条内容边框 ----- */
    --bar-border: var(--theme);
}

/* ------------------------ 主体颜色  end ------------------------ */
body {
    background-color: #f3f4f5;
    /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
}

/* ------------ 简历设置 ------------ */
.resume {
    width: 794px;
    /* ************************************ */
    /* height: 1122px; */
    margin: 0 auto;
    background-color: var(--resume-bg);
    overflow: hidden;
}

/* ------------------------ 简历头部 start------------------------ */
.resume-head {
    height: 240px;
    padding-top: 25px;
    text-align: center;
    position: relative;
    z-index: 0;

    /* border: 1px solid red; */
}

/* 背景字体 */
.bg-font {
    position: absolute;
    width: 100%;
    color: var(--text-bg);
    font-size: 144px;
    letter-spacing: 0px;
    font-weight: 700;
    /* 无法选中 */
    user-select: none;
    top: -16px;
    z-index: -1;
    font-family: serif;
}

/* 头像包裹*/
.touxiang {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px auto;
    margin-bottom: 10px;
    z-index: 3;
}

/* 头像照片 */
.touxiang img {
    border-radius: 50%;
    height: 100%;
    width: 100%;
    /* 不变形 */
    object-fit: cover;
}

/* 头像框旋转  */
.touxiang::before {
    position: absolute;
    content: "";
    /* display: block; */
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background-image: linear-gradient(#12c2e9, #c471ed, #f64f59);
    animation: xuanzhuan 3s linear infinite;
    top: -5px;
    left: -5px;
    z-index: -1;
}

/* 旋转动画 */
@keyframes xuanzhuan {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 姓名 */
.resume-head h2 {
    position: relative;
    /* 字体左右间距 */
    letter-spacing: 7px;
    margin-bottom: 5px;
    color: var(--name-color);
}

/* 认证 V 图标 */
.resume-head h2 i::after {
    height: 30px !important;
    color: #ffb502;
    font-style: normal;
    font-family: 'iconfont';
    content: '\e601';
    font-size: 18px;
}

/* 求职意向 */
.qiuzhi {
    margin-bottom: 5px;
}

/* 徽章 */
.huizhang {
    width: 100%;
    user-select: none;
    display: flex;
    justify-content: center;
}

.huizhang li {
    color: #fff;
    font-size: 14px;
    border-radius: 16px;
    /* border: 1px solid #dadada; */
    padding: 2px 10px;
    margin: 0 12px;
}

/* 徽章颜色 */
.huizhang li:nth-child(1) {
    background-color: var(--huizhang1);
}

.huizhang li:nth-child(2) {
    background-color: var(--huizhang2);
}

.huizhang li:nth-child(3) {
    background-color: var(--huizhang3);
}

.huizhang li:nth-child(4) {
    background-color: var(--huizhang4);
}

.huizhang li:nth-child(5) {
    background-color: var(--huizhang5);
}

.huizhang li:nth-child(6) {
    background-color: var(--huizhang6);
}


/* ------------------------ 简历头部  end ------------------------ */
/* ------------------------ 简历主体 start------------------------ */
.resume-main {
    width: 100%;
    /* ************************************ */
    /* height: 832px; */
    display: flex;
    padding: 10px 30px;

    overflow: hidden;
}

/* ------------ 模块标题 ------------ */
.module-title {
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    font-weight: 700;
    color: var(--title);
    background: var(--title-bg);
    background: var(--title-bg);
    border-left: 7px solid var(--title-border);

    padding-left: 15px;
}


/* ------------------------ 简历左侧 start------------------------ */
.resume-left {
    width: 240px;
    height: 100%;
    padding-right: 30px;
}

.resume-left {
    width: 240px;
    height: 100%;
    padding-right: 30px;
    overflow: hidden;
}

/* ------------ 左侧盒子 ------------ */
.resume-left .module {
    width: 180px;
    width: 100%;
    /* border: 1px solid red; */
    /* margin-bottom: 20px; */
}

/* 盒子内容 */
.resume-left .module-content {
    color: var(--text-color);
    padding: 15px 0 15px 15px;
}

/* 盒子小节 */
.resume-left .module-wrap {
    margin-bottom: 30px;
}

.resume-left .module-wrap li {
    margin-bottom: 15px;
}

/* 基本信息图标 */
.resume-left .xinxi li::before {
    font-style: normal;
    font-family: "iconfont";
    /* font-size: 18px; */
    color: var(--theme);
    margin-right: 5px;
}

.resume-left .xinxi li:nth-child(1)::before {
    /* 年龄 */
    content: "\e60a";
}

.resume-left .xinxi li:nth-child(2)::before {
    /* 籍贯 */
    content: "\e609";
}

.resume-left .xinxi li:nth-child(3)::before {
    /* 微信 */
    content: "\e60b";
}

.resume-left .xinxi li:nth-child(4)::before {
    /* 电话 */
    content: "\e600";
}

.resume-left .xinxi li:nth-child(5)::before {
    /* 邮箱 */
    content: "\e602";
}

/* ----- 备用图标 ----- */
.resume-left .xinxi li i {
    /* 学历 */
    content: "\e608";
    /* 专业 */
    content: "\e60e";
    /* 微信*/
    content: "\e60b";
}

/* ------------ 教育背景 ------------ */
.resume-left .jiaoyu li {
    /* text-align: center; */
    margin-bottom: 8px;
    color: var(--bold-color);
    font-weight: 700;
}

/* 学校logo */
.resume-left .jiaoyu img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto;
}

.resume-left .zhiye li {
    margin-bottom: 10px;
}

/* ------------ 职业技能 ------------ */
.resume-left .bar li span {
    display: inline-block;
    width: 50px;
    /* font-size: 12px; */
}

/* ----- 进度条 ----- */
.resume-left .bar div {
    display: inline-block;
    background-color: var(--bar-bg);
    height: 12px;
    width: 66%;
    border-radius: 20px;
    box-shadow: inset 0 1px 2px rgb(0 0 0 /30%);
    padding-left: 2px;
}

/* 进度条进度 */
.resume-left .bar div i {
    display: block;
    height: 12px;
    line-height: 18;
    padding-left: 2px;
    border-radius: 20px;
    border: 1px solid var(--bar-border);
    background-image: linear-gradient(to bottom,
            var(--bar-bg1) 0%,
            var(--bar-bg2) 40%,
            var(--bar-bg3) 100%);
}

/* ------------------------ 简历左侧  end ------------------------ */
/* ------------------------ 简历右侧 start------------------------ */
.resume-right {
    width: 554px;
    height: 100%;
    border-left: 1px dotted #ccc;
    /* border-left: 1px solid #ccc; */
    padding-left: 30px;
    overflow: hidden;
}

/* ------- 右侧模块 ------- */


.resume-right .module-content {
    color: var(--text-color);
    padding: 20px 10px 20px 15px;
}

.resume-right .module-wrap {
    margin-bottom: 10px;
}

/* ------------------------ 简历右侧  end ------------------------ */
/* ------------ 内容编辑 start------------ */

.item-edit p {
    /* font-size: 13px; */
    /* 向两侧对齐，最后一行无效 */
    /* text-align: justify; */
    line-height: 1.4;
}

/* ------- 项目经验 ------- */
.xiangmu .item-edit ul {
    counter-reset: li;
}

.xiangmu .item-edit li::before {
    counter-increment: li;
    content: counter(li) '.';
}

/* ------- 技能特长 ------- */
.jineng li:before {
    content: '\2713';
    margin: 20px 5px;
}

.jineng li {
    margin-bottom: 5px;
}

/* ------------ 内容编辑 end------------ */
/* ------------ 三等分 start------------ */
.col-3 {
    display: flex;
    justify-content: space-between;
    /* justify-content: start; */
    /* font-size: 17px; */
    color: var(--bold-color);
    font-weight: 700;
    overflow: hidden;
}

/* ------------ 三等分  end ------------ */
/* ------------ 二等分 start------------ */
.resume-right .col-2 {
    display: flex;
    justify-content: space-between;
    /* justify-content: start; */
    /* font-size: 17px; */

    overflow: hidden;
}

/* .col2 ul {
    flex: 1
} */


/* ------- 荣誉证书 ------- */
.resume-right .zhengshu ul:nth-child(1) li {
    margin-left: 20px;
}

.resume-right .zhengshu li {
    list-style: circle;
}

/* ------------ 二等分  end ------------ */
/* ------------------------ 简历主体  end ------------------------ */

/* ------------------------ 底部版权 start------------------------ */
.resume-foot {
    height: 30px;
    line-height: 30px;
    text-align: center;
    /* color: #6a8bad; */
    color: var(--color-footer);
}

.resume-foot a {
    color: var(--color-footer);
}

footer ul {
    display: flex;
    justify-content: center;
}

footer ul li {
    margin: 0 4px;
}

/* ------------------------ 底部版权  end ------------------------ */

/* ------------------------ 侧边栏 start ------------------------ */


/* ------------------------ 侧边栏  end  ------------------------ */